<template>
  <div class="liked-articles-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="3" animated />
    </div>

    <!-- 空状态 -->
    <div
      v-else-if="!loading && articlesList.length === 0"
      class="empty-container"
    >
      <div class="empty-content">
        <h3>暂无点赞的文章</h3>
        <p>
          {{
            isCurrentUser ? "你还没有点赞任何文章" : "该用户还没有点赞任何文章"
          }}
        </p>
      </div>
    </div>

    <!-- 文章列表 -->
    <div v-else class="articles-list">
      <ArticleCard
        v-for="article in articlesList"
        :key="article.articleId"
        :article="article"
        :interaction-time="article.likeTime"
        :interaction-time-label="'点赞'"
        :show-collect-count="false"
        :show-like-count="true"
        :show-interactive-like="isCurrentUser"
        class="article-item"
        @removed="handleArticleRemoved"
      />

      <!-- 分页 -->
      <div v-if="total > 0" class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, watch, onMounted } from "vue";
import { IconifyIconOnline } from "@/components/ReIcon";
import { useUserLikedArticles } from "@/composables/useUserInteractions";
import ArticleCard from "@/components/ArticleCard.vue";

interface Props {
  userId: number | null;
  isCurrentUser?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  isCurrentUser: false
});

// 使用用户点赞文章数据管理
const {
  loading,
  data,
  currentPage,
  pageSize,
  loadData,
  handlePageChange,
  handleSizeChange,
  removeArticle
} = useUserLikedArticles(props.userId!);

// 计算属性
const articlesList = computed(() => data.value?.records || []);
const total = computed(() => data.value?.total || 0);

// 监听用户ID变化
watch(
  () => props.userId,
  async newUserId => {
    if (newUserId) {
      console.log(`👍 LikedArticlesList - 用户ID变化: ${newUserId}`);
      await loadData(1);
    }
  },
  { immediate: true }
);

// 处理文章移除
const handleArticleRemoved = (articleId: number) => {
  console.log(`❌ 移除点赞文章: ${articleId}`);
  removeArticle(articleId);
};

// 组件挂载时加载数据

onMounted(() => {
  console.log(`🔹 LikedArticlesList 组件挂载 - 用户ID: ${props.userId}`);
  // 移除手动调用，依靠 watch immediate: true 来加载数据
});
</script>

<style scoped lang="scss">
// 响应式适配
@media (width <= 768px) {
  .liked-articles-container {
    min-height: 300px;
  }

  .empty-container {
    min-height: 300px;

    .empty-content {
      h3 {
        font-size: 16px;
      }

      p {
        font-size: 13px;
      }
    }
  }
}

.liked-articles-container {
  min-height: 400px;
}

.loading-container {
  padding: 20px 0;
}

.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;

  .empty-content {
    color: var(--el-text-color-secondary);
    text-align: center;

    h3 {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 500;
      color: var(--el-text-color-regular);
    }

    p {
      margin: 0;
      font-size: 14px;
      color: var(--el-text-color-secondary);
    }
  }
}

.articles-list {
  .article-item {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 16px;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    margin-top: 16px;

    :deep(.el-pagination) {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }
  }
}
</style>
